<template>
	<div class="tag">
		<h3>标签云</h3>
		<div class="tag-container">
			<span
				v-for="t in tagList"
				:key="t.tagName"
				@click="$emit('changeTagId', t.id)"
				:style="{ fontSize: `${t.fontSize}px`, background: t.bgColor, color: t.textColor }"
			>
				{{ t.tagName }}
			</span>
		</div>
	</div>
</template>

<script>
	import { queryTag } from "@/api/Tag";
	export default {
		components: {},
		data() {
			return {
				tagList: [],
			};
		},
		methods: {
			randomColor(alpha) {
				//判断有没有传入透明值，没有传入的话，随机生成0-1之间的小数
				//Math.random()只能生成0-1之间的小数，不包含0跟1，Math.random()*10，是1-10之间的整数，除以10再四舍五入，就有可能得到0或者1.
				alpha = alpha == undefined ? ((Math.random() * 10) / 10).toFixed(1) : alpha;
				//将参数转化成数值
				alpha = Number(alpha);
				//如果传入的参数是非数值，则让透明度为1
				if (isNaN(alpha)) alpha = 1;
				//颜色拼接
				var color = "rgba(";
				for (var i = 0; i < 3; i++) {
					color += parseInt(Math.random() * 256) + ",";
				}
				color += alpha + ")";
				return color;
			},
			async queryTag() {
				const res = await queryTag({ pageSize: 100 });
				this.tagList = res.data.rows;
				this.tagList.push({ tagName: "最新", bgColor: "#3d81f7", textColor: "#fff" });
			},
		},
		created() {
			this.queryTag();
		},
	};
</script>
<style lang="scss" scoped>
	.tag {
		background: #fff;
		padding: 35px 30px;
		margin-bottom: 20px;
		h3 {
			position: relative;
			cursor: pointer;
			padding-bottom: 15px;
			font-weight: 500;
			border-bottom: 2px solid #e8e8e8;
			&::before {
				content: "";
				width: 12%;
				height: 2px;
				position: absolute;
				bottom: 0px;
				left: 0;
				bottom: -1px;
				background: #000;
				transition: all 0.7s;
			}
			&:hover {
				&::before {
					width: 25%;
					transition: all 0.7s ease-in;
				}
			}
		}
		&-container {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
			span {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 4px 12px;
				border-radius: 4px;
				margin: 10px;
				background: #f3f6f3;
				cursor: pointer;
				user-select: none;
				transition: all 0.5s;

				&:hover {
					transition: all 0.5s;
					text-shadow: #000 1px 1px 1px;
					border-radius: 0;
					transform: scale(1.2);
				}
			}
		}
	}
</style>
